<template>
  <div id="main">
    <div class="container">
      <div class="logo">
        <img src="../../assets/image/logo.png" alt="" />
        <h1>美美优选</h1>
      </div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '用户名不能为空' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '密码不能为空' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </div>
        <div style="margin: 16px">
          <van-button
            class="loginBtn"
            round
            block
            color="#fbce33"
            type="info"
            native-type="submit"
            to="/register"
          >
            注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import Vue from "vue";
import { requestlogin } from "@/api/user.js";
import { Toast } from "vant";
Vue.use(Toast);
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    async onSubmit() {
      let res = await requestlogin(this.username, this.password);
      let { resultCode, resultInfo } = res.data;
      if (resultCode == 1) {
        let user = {
          username: resultInfo.username,
          headerimg: resultInfo.headerimg,
          nick: resultInfo.nick,
          id: resultInfo.m_id,
        };
        // 存储到store中
        this.$store.dispatch("saveUser", user);
        let token = res.data.token;
        this.$store.dispatch("saveToken", token);
        if ((token = this.$store.getters.getToken)) {
          Toast.success("登录成功！");
          setTimeout(() => {
            this.$router.push({ path: "/" });
          }, 1000);
        }
      } else {
        Toast.fail("验证失败，请重新登录");
      }
      // console.log('submit', values);

      // axios({
      //     method: 'post',
      //     url: 'http://api.yuguoxy.com/api/login',
      //     data: {
      //         username: this.username, password: this.password

      //     }
      // }).then(response => {
      //     let data = response.data
      //     let { resultCode, resultInfo } = data
      //     console.log(resultCode);
      //     if(resultCode==1){
      //         console.log(response);
      //     }else{
      //         console.log('22222222');
      //     }
      // })
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

#main {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .container {
    width: 80vw;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .van-form {
      .van-field {
        height: 50px;
        line-height: 50px;
      }
    }

    .logo {
      width: 160px;
      height: 160px;
      text-align: center;
      margin-top: 40px;
      color: white;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .loginBtn {
    margin-left: 50%;
    transform: translate(-50%, 0);
  }
}
</style>
